<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>结算台</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  <link rel="stylesheet" type="text/css" href="https://ad.aicebar.com/public/lib/css/style.css" />
  <link rel="stylesheet" type="text/css" href="../css/pay.css" />
  <script src="https://ad.aicebar.com/public/lib/js/vue.min.js"></script>
  <link href="https://ad.aicebar.com/public/lib/css/vant.min.css" rel="stylesheet">
  <script src="https://ad.aicebar.com/public/lib/js/vant.min.js"></script>
</head>

<body>
  <div id="app" v-cloak>
    <div class="wrap">
      <img :src="obj.pro_img" class="banner">
      <div class="main">
        <p class="txt2">{{obj.pro_name}}</p>
        <div class="flex">
          <p>{{obj.sale_nums}}人购买</p>
        </div>
      </div>
    </div>

    <div class="box">
      <div class="top">
        <div class="lf">
          <p>{{user.nick_name}}</p>
          <img :src="sex" class="icon2">
        </div>
        <div class="btn2" @click="callFlutter()">切换档案</div>
      </div>
      <p class="txt1">{{user.birth_year}}-{{user.birth_month}}-{{user.birth_day}}
        {{user.province}}{{user.city}}{{user.area}}</p>
      <p class="txt3">注：请检查档案信息是否正确，更换档案需重新购买</p>
    </div>

    <div class="box2">
      <p class="txt4">支付方式</p>
      <van-radio-group v-model="type">
        <div class="flex3">
          <div class="row">
            <img src="../images/icon-wx.png" class="icon">
            <p>微信支付</p>
          </div>
          <van-radio name="2" checked-color="#7990F7"></van-radio>
        </div>
      </van-radio-group>
    </div>

    <div class="ps">
      <p>合计：<span class="col1">¥</span><span class="col2">{{obj.price}}</span></p>
      <div @click="handelSub()">支付订单</div>
    </div>
  </div>


  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.1/vconsole.min.js"></script> -->
  <script src="https://ad.aicebar.com/public/lib/js/axios.js"></script>
  <script src="../js/utils.js"></script>
  <script>
    var api = domain()
    var json = getQueryString()
    var docId = ''
    // var vConsole = new window.VConsole();
    // vConsole.destroy();

    Vue.use(vant.Icon);

    new Vue({
      el: '#app',
      data() {
        return {
          type: '2',
          id: json.id,
          obj: '',
          user: '',
          sex: ''
        }
      },
      created() {
      },
      mounted() {
        window.updateSocket = this.getArchives;
        this.getData()
        this.getUser()
      },
      methods: {
        handelSub() {
          var data = new FormData();
          data.append('product_id', this.obj.id);
          data.append('pay_type', 2);
          data.append('price', this.obj.price);
          data.append('user_archives_id', docId);
          const headers = {
            'authorization': getAppToken()
          }
          axios.post(api + '/v1/subject/pay', data, {
            headers
          })
            .then((res) => {
              if (res.data.code === 2000) {
                var data = res.data.data
                if (this.obj.is_buy == 1) {
                  switchUrl(this.obj.pro_type_sim, this.obj.id, this.obj.order_no)
                } else {
                  this.handlePay(data)
                }
              } else {
                this.$toast({
                  message: res.data.msg,
                  position: 'middle',
                  duration: 1000
                });
              }

            })
        },
        handlePay(data) {
          this.$toast.loading({
            mask: true,
            message: '加载中...'
          });
          this.wxExtPay(data)
        },

        wxExtPay(data) {
          // console.log(data)
          let str = data.h5_url + '&redirect_url=' + encodeURIComponent('https://shop.aicebar.com/report_h5/html/payConfirm.html?order=' + data.order_no)
          window.location.replace(str)
        },
        getData() {
          var data = new FormData();
          data.append('product_id', this.id);
          data.append('nums', 1);
          const headers = {
            'authorization': getAppToken()
          }
          axios.post(api + '/v1/product/payDetail', data, {
            headers
          })
            .then((res) => {
              this.obj = res.data.data
            })
        },

        getUser() {
          var data = new FormData();
          const headers = {
            'authorization': getAppToken()
          }
          axios.post(api + '/v1/user/detail', data, {
            headers
          })
            .then((res) => {
              docId = res.data.data.default_archives_id
              this.getArchives(res.data.data.default_archives_id)
            })
        },
        getArchives(str) {
          var data = new FormData();
          data.append('id', str);
          const headers = {
            'authorization': getAppToken()
          }
          axios.post(api + '/v1/user/archivesDetail', data, {
            headers
          })
            .then((res) => {
              this.user = res.data.data
              if (this.user.gender == 1) {
                this.sex = '../images/nan.png'
              } else {
                this.sex = '../images/nv.png'
              }
            })
        },
        callFlutter() {
          changeDoc.postMessage("js call flutter");
        },

      },
    });

    function getDocId(id) { // 原生传入档案id
      console.log(id)
      docId = id
      updateSocket(docId)
    }
  </script>
</body>

</html>